<template>
	<!-- 导航组 -->
	<view class="diy-navBar" :style="{ background: '#fff', color: '#000' }">
		<view class="data-list" :class="[`avg-sm-5`]">
			<view class="item-nav" v-for="(dataItem, index) in dataList" :key="index">
				<view class="nav-to" @click="onLink(index)">
					<view class="item-image">
						<image :style="{ width: dataItem.style.width, height: dataItem.style.height }" :src="dataItem.url"></image>
					</view>
					<view class="item-text oneline-hide">{{ dataItem.label }}</view>
				</view>
			</view>
			<view v-if="dataList.length == 0" style="margin-top: 30rpx; width: 100%; text-align: center">暂无数据</view>
		</view>
	</view>
</template>

<script>
import mixin from '../mixin'

export default {
	name: 'NavBar',
	/**
	 * 组件的属性列表
	 * 用于组件自定义设置
	 */
	props: {
		itemIndex: String,
		itemStyle: Object,
		params: Object
	},

	mixins: [mixin],
	data() {
		return {
			dataList: [
				{
					url: '/static/newicons/shouye_chuanmei.png',
					label: '川美',
					style: {
						width: '100rpx',
						height: '100rpx'
					}
				},
				{
					url: '/static/newicons/shouye_guomei.png',
					label: '国美',
					style: {
						width: '100rpx',
						height: '100rpx'
					}
				},
				{
					url: '/static/newicons/shouye_huizong.png',
					label: '汇总',
					style: {
						width: '100rpx',
						height: '100rpx'
					}
				},
				{
					url: '/static/newicons/shouye_wenchuang.png',
					label: '文创',
					style: {
						width: '100rpx',
						height: '100rpx'
					}
				},
				{
					url: '/static/newicons/shouye_wangke.png',
					label: '网课',
					style: {
						width: '100rpx',
						height: '100rpx'
					}
				}
			]
		}
	},
	/**
	 * 组件的方法列表
	 * 更新属性和数据的方法与更新页面数据的方法类似
	 */
	methods: {
		onLink(idx) {
			let num = idx
			if (idx == 0 || idx == 1) {
				num = 0
			} else if (idx == 2) {
				num = 1
			} else if (idx == 4) {
				num = 2
			}
			this.$navTo('pagesA/index?index=' + num)
		}
	}
}
</script>

<style lang="scss" scoped>
.diy-navBar .data-list::after {
	clear: both;
	content: ' ';
	display: table;
}

.item-nav {
	float: left;
	margin: 10px 0;
	text-align: center;

	.item-text {
		font-size: 26rpx;
	}

	.item-image {
		margin-bottom: 4px;
		font-size: 0;
	}

	.item-image .image {
		width: 88rpx;
		height: 88rpx;
	}
}

/* 分列布局 */

.diy-navBar .avg-sm-3 > .item-nav {
	width: 33.33333333%;
}

.diy-navBar .avg-sm-4 > .item-nav {
	width: 25%;
}

.diy-navBar .avg-sm-5 > .item-nav {
	width: 20%;
}
</style>
